<template>
	<div style="position: relative;">
		<el-form :model="obj" :rules="rules" ref="ruleForm" style="display:flex;position:relative;">
				<el-form-item :label="$t('message.xexgf')+ ':'" style="width: 100%;" label-width="205px">
					<div style="width: 80%;">
						<el-form-item label="" prop="type" style="width: 27%;" class="mystyle">
							<el-select v-model="obj.type" :placeholder="$t('message.p-qxz')" @change="change">
							   <el-option :label="$t('message.cgs')" value="1"></el-option>
							   <el-option :label="$t('message.gys')" value="2"></el-option>
							</el-select>
						</el-form-item>	
						<el-form-item label="" prop="value" style="flex:1;position: relative;width: 68%;float: right;">
							<el-input :placeholder="placeholder" @blur="onChanges" @input="changeValue" v-model="obj.value"></el-input>
							<!-- <div class="delbnt" @click="delParties"></div>	 -->
							<i @click="delParties" :class="['el-icon-close','delbnt']"></i>
							<hot-words :value="hotValue" width="100%" ref="hots" @hotClick="hotClick($event)"></hot-words>
						</el-form-item>
					</div>
				</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {checkSupplier} from "@assets/js/validator.js";
	import hotWords from './hotWords.vue'
	export default{
		data(){
			return{
				purchaser:'',
				placeholder:'',
				hotValue:'',
				obj:{
					type:'',
					value:''
				},
				rules:{
					value:[{ required: true, validator: checkSupplier, trigger: 'blur' }],
					type:[{ required: true, message: this.$t('message.p-qxz'), trigger: 'change' },{trigger: 'blur'}]
				}
			}
		},
		components:{
			hotWords
		},
		props:['itemData'],
		watch:{
			itemData:function(val){
				console.log(val)
			}
		},
		mounted() {
			if(this.itemData.type){
				this.obj = this.itemData
			}
		},
		methods:{
			delParties(){
				this.$emit('delParties')
			},
			onChanges() {
				setTimeout(()=>{
					if(this.$refs.hots){
						this.$refs.hots.isShow = false
					}
				},300)			
			},
			hotClick(value){
				this.obj.value=value
			},
			changeValue(value){
				this.hotValue=value
			},
			change(value){
				if(value==1) this.placeholder = this.$t('message.p-cgs')
				if(value==2) this.placeholder = this.$t('message.p-gys')
			},
			//子组件校验，传递到父组件
			  validateForm () {
				let flag = null
				this.$refs['ruleForm'].validate(valid => {
				  if (valid) {
					flag = true
				  } else {
					flag = false
				  }
				})
				return flag
			  }

		}
	}
</script>

<style lang="scss" scoped>
	.delbnt{
		position: absolute;
		right: -20px;
		top: 12px;
		font-size: 20px;
		cursor: pointer;
		width:13px;
		color: #979797;
	}
	.mystyle{
		::v-deep .el-form-item__label{
			display: inline-block;
			width: 120px;
		}
		::v-deep .el-form-item__content{
			display: inline-block;
		}
	}
	.mystyle{
		display: inline-block;
	}
</style>
